<template>
    <div class="pager">
        <ul class="pagesInner">
            <span class="info">共{{totalPages}}页</span>
            <li class="pages" @click="handlePrevPage" :class="{noClick : curPage == 1}"
            :disabled="{disabled: curPage == 1}">
                <span>上一页</span>
            </li>
            <li class="pages content" v-for="(item, index) of pages"
            @click="handleSelectPages(item, index)" :key="index" :class="{actived : item === curPage}">
                <span>{{item}}</span>
            </li>
            <li class="pages" @click="handleNextPage" :class="{noClick : curPage == totalPages}">
                <span>下一页</span>
            </li>
            <span class="info">{{totalData}}条数据</span>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'Pagnitation',
  data () {
    return {
      // totalData: 99, // 总共的数据数量
      // totalPages: 10, // 总共的页码数量
      middleSize: 3, // 中间显示的页码数量
      curPage: 1, // 当前页码
      pageData: 10 // 每一页数据的个数pagedata
    }
  },
  props: {
    // pageData: String,
    // totalPages: String,
    totalData: String
  },
  computed: {
    totalPages () {
      return Math.ceil(this.totalData / this.pageData)
    },
    pages () {
      if (this.totalPages <= this.middleSize + 2) {
        let pages = []
        for (let i = 1; i <= this.totalPages; i++) {
          pages.push(i)
        }
        return pages
      } else if (this.curPage <= this.middleSize) {
        let pages = [1]
        for (let i = 2; i < this.middleSize + 1; i++) {
          pages.push(i)
        }
        pages.push('...')
        pages.push(this.totalPages)
        return pages
      } else if (this.curPage >= this.totalPages - (this.middleSize - 1)) {
        let pages = [1, '...']
        for (let i = this.totalPages - this.middleSize + 1; i <= this.totalPages; i++) {
          pages.push(i)
        }
        return pages
      } else {
        let pages = [1, '...']
        const half = Math.floor((this.middleSize - 2) / 2) // 向下取整
        for (let i = this.curPage - half; i <= this.curPage + half; i++) {
          pages.push(i)
        }
        pages.push('...')
        pages.push(this.totalPages)
        return pages
      }
    }
  },
  methods: {
    handlePrevPage () {
      this.curPage -= 1
      this.curPage = this.curPage <= 1 ? 1 : this.curPage
      if (this.curPage !== 1) {
        this.$emit('curPageChanged', this.curPage)
      }
    },
    handleNextPage () {
      this.curPage += 1
      this.curPage = this.curPage >= this.totalPages ? this.totalPages : this.curPage
      if (this.curPage !== this.totalPages) {
        this.$emit('curPageChanged', this.curPage)
      }
    },
    handleSelectPages (item, index) {
      if (item === '...' || this.curPage === item) {
        // this.curPage = index + 1
      } else {
        this.curPage = item
        // console.log(this.curPage)
        this.$emit('curPageChanged', this.curPage)
        // console.log(this.curPage)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.pagesInner
    border-top: .02rem #666 dashed
    margin-top: .2rem
    overflow: hidden
    display: flex
    // justify-content: space-between
    justify-content: center
    //outline:#00FF00 dotted thick;
    usesr-select: none
    .pages
        font-size: .32rem
        margin: .2rem
        border-radius: .1rem
        border: .02rem solid #333
        padding: 0 .32rem
        line-height: .6rem
        float: left
        cursor: pointer
    .info
        line-height: .6rem
        height: .6rem
        display: inline-block
        margin: .2rem  .4rem
        font-size: .31rem
        // .content
        //     width: 1.3rem
   &.noClick
      cursor: no-drop
      background: #eee
      //border-color: transparent
   &.actived
      border-color: #2d8cf0
      background-color: #2d8cf0
      color: #fff

</style>
